<template>
	<div class="screen7-module4-content" ref="content">
		<div class="chart-frame-block">
			<div class="chart-layout">
				<div class="chart-block" ref="charta"></div>
				<div class="desc-view">
					<div>余位</div>
					<div>{{dataSource.lIdleNumber}}</div>
				</div>
			</div>
			<div class="house-name">立体库</div>
		</div>
		<div class="chart-frame-block">
			<div class="chart-layout">
				<div class="chart-block" ref="chartb"></div>
				<div class="desc-view">
					<div>余位</div>
					<div>{{dataSource.pIdleNumber}}</div>
				</div>
			</div>
			<div class="house-name">平库</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onBeforeUnmount, toRefs, getCurrentInstance, onMounted } from 'vue';
import * as echarts from 'echarts';
import { eleResize } from '@/assets/js/utils'

const instance = getCurrentInstance()

const props = defineProps({
	dataSource:{
		type:Object,
		default:function(){
			return {
				lIdleNumber:0,
				lStockNumber:0,
				pIdleNumber:0,
				pStockNumber:0,
				loaded:false
			}
		}
	}
})
const {dataSource} = toRefs(props)

let $frame = null;
let $domA = null;
let $domB = null;
let chartA = null;
let chartB = null;

const defaultOption = {
	series: [
		{
			name: '库存占比',
			type: 'pie',
			radius: ['70%', '80%'],
			avoidLabelOverlap: false,
			itemStyle: {
				borderRadius: 4
			},
			label:{
				show:false
			},
			data: []
		}
	]
}

const createCharts = function(callback){
	window.setTimeout(()=>{
		if (!$domA) {
			$domA = instance.refs.charta;
			chartA = echarts.init($domA)
		}
		if (!$domB) {
			$domB = instance.refs.chartb;
			chartB = echarts.init($domB)
		}
		callback()
	},100)
	
}

const drawCharts = function(){
	destoryCharts()
	if (!dataSource.value.loaded) return false
	createCharts(()=>{
		let opt = JSON.parse(JSON.stringify(defaultOption))
		opt.series[0].data = [
			{value:dataSource.value.lIdleNumber,name:'已用',itemStyle:{color:'#a9a9a9'}},
			{value:dataSource.value.lStockNumber,name:'剩余',itemStyle:{color:'#00FFFF'}}
		];
		chartA.setOption(opt)
		
		opt = JSON.parse(JSON.stringify(defaultOption))
		opt.series[0].data = [
			{value:dataSource.value.pStockNumber,name:'已用',itemStyle:{color:'#a9a9a9'}},
			{value:dataSource.value.pIdleNumber,name:'剩余',itemStyle:{color:'#00FFFF'}}
		];
		chartB.setOption(opt)
	})
	
}

const destoryCharts = function(){
	destoryChartA()
	destoryChartB()
}

const destoryChartA = function(){
	try{
		chartA.dispose();
		$domA.innerHTML = '';
		chartA = null;
		$domA = null;
	}catch(e){
		//TODO handle the exception
	}
}

const destoryChartB = function(){
	try{
		chartB.dispose();
		$domB.innerHTML = '';
		chartB = null;
		$domB = null;
	}catch(e){
		//TODO handle the exception
	}
}

/* 创建div宽高变化监听器 */
const createEleResize = function(){
	$frame = instance.refs.content;
	eleResize.on($frame, drawCharts);
}

/* div宽高变化事件移除 */
const destroyEleResize=function(){
	try{
		eleResize.off($frame, drawCharts);
		$frame = null
	}catch(e){
		//TODO handle the exception
	}
}

onMounted(()=>{
	createEleResize()
})

onBeforeUnmount(()=>{
	destroyEleResize()
	destoryCharts()
})

defineExpose({drawCharts})
</script>

<style lang="scss" scoped>
.screen7-module4-content{
	height: 100%;
	display: flex;
	.chart-frame-block{
		width: 1px;
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		.house-name{
			flex-shrink: 0;
			font-size: .3em;
			color: #fff;
			padding-bottom: .2em 0;
			text-align: center;
		}
		.chart-layout{
			height: 1px;
			flex-grow: 1;
			position: relative;
			.chart-block,.desc-view{
				height: 100%;
				width: 100%;
			}
			.desc-view{
				position: absolute;
				z-index: 1000;
				background: transparent;
				top: 0;
				left: 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: .3em;
				line-height: 1.2em;
				color: #fff;
				font-weight: bold;
			}
		}
	}
}
</style>